<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例练习(case exercise)</title>
  <link rel="stylesheet" href="./css/reset.css">
  <!-- 
    HTML和CSS的布局是网页设计中至关重要的一部分，HTML和CSS布局顺序和技巧的一些要点： 
 
      1. 结构优先：在进行网页布局时，首先要考虑页面的整体结构，包括头部、导航、内容区域、侧边栏、底部等部分的划分和排列。 
      
      2. 使用语义化标签：合理使用HTML5的语义化标签（如<header>、<nav>、<main>、<aside>、<footer>等）可以更好地描述页面结构，提高可访问性和SEO优化。 
      
      3. 盒子模型：了解CSS盒子模型的原理，包括内容框、内边距、边框和外边距，合理设置这些属性来控制元素的布局和样式。 
      
      4. 浮动和定位：使用CSS浮动（float）和定位（position）属性可以实现元素的布局排列，如实现多栏布局、居中对齐等效果。 
      
      5. 弹性布局和网格布局：使用CSS3的弹性盒子布局（Flexbox）和网格布局（Grid）可以更方便地实现复杂的页面布局，提高响应式设计的灵活性。 
      
      6. 响应式设计：考虑不同设备和屏幕尺寸的适配，使用媒体查询（Media Queries）和流式布局等技术来创建响应式网页布局。 
      
      7. 清除浮动：在使用浮动布局时，要注意清除浮动以避免出现布局错乱的情况，可以使用clear属性或伪元素清除浮动。 
      
      8. 组织CSS：合理组织和管理CSS代码，使用模块化的方式编写CSS，避免样式冲突和重复，提高代码的可维护性和可扩展性。
   -->
   <style>
     ul > li {
       margin-top: 18px;
     }

     ul > li > a {
       display: inline-block;
     }

     ul > li > a:hover {
       color: #ff6700;
     }

     /* 内容局部 */
     ul > li .ranking {
       width: 24px;
       height: 24px;
       margin-right: 3px;
       text-align: center;
       line-height: 24px;
       font-weight: 700;
       color: #999;
     }

     /* 伪类 */
     ul > li:nth-child(1) .ranking {
       color: #f00;
     }

     ul > li:nth-child(2) .ranking {
       color: #0f0;
     }

     ul > li:nth-child(3) .ranking {
       color: #00f;
     }

     /* 主体内容 */
     ul > li .content {
       display: inline;
     }

     /* 图标 */
     ul > li .icon {
       position: relative;
       top: 2px;
       left: 4px;

       display: inline-block;
       width: 16px;
       height: 16px;
       background-image: url(../../images/new_icon.svg);
     }

     ul > li .new {
       background-image: url(../../images/new_icon.svg);
     }

     ul > li .hot {
       background-image: url(../../images/hot_icon.svg);
     }

   </style>
</head>
<body>

  <ul>
    <li class="item">
      <a href="#">
        <span class="ranking">1</span>
        <div class="content">
          在进行网页布局时，首先要考虑页面的整体结构，包括头部、导航、内容区域、侧边栏、底部等部分的划分和排列
        </div>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">2</span>
        <div class="content">
          在进行网页布局时，首先要考虑页面的整体结构，包括头部、导航、内容区域、侧边栏、底部等部分的划分和排列
        </div>
        <i class="icon new"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">3</span>
        <div class="content">
          在进行网页布局时，首先要考虑页面的整体结构，包括头部、导航、内容区域、侧边栏、底部等部分的划分和排列
        </div>
        <i class="icon hot"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">4</span>
        <div class="content">
          在进行网页布局时，首先要考虑页面的整体结构，包括头部、导航、内容区域、侧边栏、底部等部分的划分和排列
        </div>
        <i class="icon"></i>
      </a>
    </li>
    <li class="item">
      <a href="#">
        <span class="ranking">5</span>
        <div class="content">
          在进行网页布局时，首先要考虑页面的整体结构，包括头部、导航、内容区域、侧边栏、底部等部分的划分和排列
        </div>
        <i class="icon new"></i>
      </a>
    </li>
    
  </ul>
  
</body>
</html>